<!-- 
 * 短信日志组件
 * @author: 
 * @since: 2022-07-27
 * index.vue
-->
<template>
  <div class="noteLog-container">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter" @roleChange="roleChange"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" @getCurrentChange="getCurrentChange" @colSelect="colSelect" @refresh="getNoteLogList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" :isShowGrooveHandleCol="false">
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { colFilters } from '@/utils/common.js'
import { getNoteLogListApi } from '@/api/interface/log.js'
import { getAllRoleList } from '@/api/interface/role.js'

const state = reactive({
  formModel: {//搜索列表的参数
    mobile: '',//手机号码
    userRole: '',//用户角色
    status: '',//发送状态
    depart: '',//所在单位/部门
    sendTime: [],//登录时间
    startDate: '',//登录开始时间
    endDate: '',//登录结束时间
    userName: '',//用户账号
  },
  formLabel: [
    {
      label: '手机号码',
      model: "mobile",
      type: "number",
      width: '160',
      placeholder: '请输入手机号码',
    },
    {
      label: '用户角色',
      model: "userRole",
      type: "select",
      width: '160',
      option: [],
      change: 'roleChange',
    },
    {
      label: '发送状态',
      model: "status",
      type: "select",
      width: '160',
      option: [
        {
          key: '成功',
          value: '成功'
        },
        {
          key: '失败',
          value: '失败'
        }
      ],
    },
    {
      label: '发送时间',
      model: "sendTime",
      type: "datetimerange",
      width: '360',
    },
    {
      label: '所在单位/部门',
      model: "depart",
      type: "select",
      width: '160',
      option: [],
    },
    {
      label: '用户账号',
      model: "userName",
      type: "number",
      width: '160',
      placeholder: '请输入用户账号',
    },
  ],
  tableData: [],
  tableHeader: [
    {
      label: '用户账号',
      prop: "userName",
    },
    {
      label: '姓名',
      prop: "realName",
    },
    {
      label: '用户角色',
      prop: "roleName",
    },
    {
      label: '所在单位/部门',
      prop: "rolenode",
    },
    {
      label: '手机号码',
      prop: "phone",
    },
    {
      label: '短信内容',
      prop: "message",
    },
    {
      label: '短信模版编号',
      prop: "templateCode",
    },
    {
      label: '发送状态',
      prop: "status",
    },
    {
      label: '短信回执',
      prop: "result",
    },
    {
      label: '发送时间',
      prop: "insertDate",
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  roleRowData: {},//table每一行数据
  selectTableId: [],//选择表格数据
})

const loading = ref(true)


onMounted(() => {
  getAllRole()
  getNoteLogList()

})
//获取角色列表
const getAllRole = () => {
  const params = {
    ipi: 1,
    ips: 100,
    rolename: '',
    valid: '',
  }
  getAllRoleList(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[1].option = data.result.map(item => ({
        key: item.rolename,
        value: item.id
      }))
    }

  })
}

//获取短信日志列表
const getNoteLogList = () => {
  loading.value = true
  let time = {}
  if (state.formModel.sendTime.length > 0) {
    const [startDate, endDate] = state.formModel.sendTime
    time.startDate = startDate
    time.endDate = endDate
  }
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    mobile: state.formModel.mobile,
    status: state.formModel.status,
    startDate: time.startDate,
    endDate: time.endDate,
    userName: state.formModel.userName
  }
  getNoteLogListApi(params).then(res => {
    const { status, data } = res
    loading.value = false
    if (status === 200) {
      state.tableData = data.result.map(item => ({
        ...item,
        // roleName: item.userRole.join().trim()
      }))
      state.pagination.total = data.total
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize

    }


  })

}

//操作日志模块功能按钮
const btnList = reactive([
  // {
  //   name: '导出日志',
  //   bgColor: '#00A2FF'
  // },
])
//点击登录日志操作按钮
const clickHandle = (index) => {
  switch (index) {
    case 0://导出日志
      console.log('导出日志');
      break;
  }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getNoteLogList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getNoteLogList()
}
//搜索
const filter = () => {
  getNoteLogList()
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    if (key === 'sendTime') {
      state.formModel[key] = []
    } else {
      state.formModel[key] = ''
    }
  }
  getNoteLogList()

}


</script>

<style lang="scss" scoped></style>
